<template>
  <el-dialog
    :visible="showDialog"
    title="题目预览"
    width="900px"
    @close="close"
  >
    <el-row>
      <el-col style="width: 25%"
        >【题型】：{{ preview.questionType | getQuestionType }}</el-col
      >
      <el-col style="width: 25%">【编号】：{{ preview.id }}</el-col>
      <el-col style="width: 25%"
        >【难度】：{{ preview.difficulty | getdifficulty }}</el-col
      >
      <el-col style="width: 25%">【标签】：{{ preview.tags }}</el-col>
      <el-col style="width: 25%">【学科】：{{ preview.subjectName }}</el-col>
      <el-col style="width: 25%">【目录】：{{ preview.directoryName }}</el-col>
      <el-col style="width: 25%">【方向】：{{ preview.direction }}</el-col>
    </el-row>
    <hr />
    <el-row> 【题干】： </el-row>
    <el-row v-html="preview.question" style="color: #6767ff"></el-row>
    <el-row v-if="preview.questionType != 3">{{
      preview.questionType == 1
        ? '单选题 选项：（以下选中的选项为正确答案）'
        : '多选题 选项：（以下选中的选项为正确答案）'
    }}</el-row>
    <div v-if="preview.questionType == 1">
      <el-row v-for="item in preview.options" :key="item.id">
        <el-col>
          <el-radio :label="item.isRight" v-model="a">{{
            item.title
          }}</el-radio>
        </el-col>
      </el-row>
    </div>
    <div v-if="preview.questionType == 2">
      <el-row v-for="item in preview.options" :key="item.id">
        <el-col>
          <el-checkbox :checked="!!item.isRight">{{ item.title }}</el-checkbox>
        </el-col>
      </el-row>
    </div>
    <hr />
    <el-row>
      <el-col>
        【参考答案】：
        <el-button type="danger" size="small" @click="controls = true"
          >视频答案预览</el-button
        >
      </el-col>
      <div>
        <video
          v-if="controls"
          controls="controls"
          :src="preview.videoURL"
          style="width: 400px; height: 300px"
        ></video>
      </div>
    </el-row>
    <hr />
    <el-row type="flex" align="middle">
      【答案解析】：<span v-html="preview.answer"></span>
    </el-row>
    <hr />
    <el-row type="flex" align="middle">
      <el-col>【题目备注】：<span v-html="preview.remarks"></span></el-col>
    </el-row>
    <el-row type="flex" justify="end">
      <el-button type="primary" @click="close">关闭</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
export default {
  data () {
    return {
      a: 1,
      controls: false
    }
  },
  props: ['showDialog', 'preview'],
  methods: {
    close () {
      this.controls = false
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped>
::v-deep .el-divider {
  color: #9a9a9a;
}
::v-deep .el-col {
  padding: 10px 0;
}
</style>
